<template>
    <div class="container">
        <video
            ref="video"
            class="video"
            autoplay
            poster="../../assets/logo.png"
        ></video>

        <div class="container-download">
            <el-card class="box-card" title="Download">
                <template #header>Download List</template>
                <div
                    v-if="!!videoAndDownloadUrl.length"
                    v-for="o in videoAndDownloadUrl"
                    :key="o"
                >
                    <el-link target="_blank" :href="o">{{ o }}</el-link>
                    <hr />
                </div>
                <el-empty v-else description="暂无下载链接"></el-empty>
            </el-card>
        </div>
    </div>
    <el-button type="primary" @click="recordOperation.start"
        >开始录制</el-button
    >
    <el-button type="success" @click="recordOperation.stop">结束录制</el-button>
    <el-button type="success" @click="recordOperation.pause"
        >暂停录制</el-button
    >
    <el-button type="success" @click="recordOperation.resume"
        >继续录制</el-button
    >
    <el-switch
        v-model="switchMediaValue.microphone"
        active-text="开启麦克风"
        inactive-text="关闭麦克风"
    >
    </el-switch>
    <el-switch
        v-model="switchMediaValue.camera"
        active-text="开启摄像头"
        inactive-text="关闭摄像头"
    >
    </el-switch>

    <video-widget ref="videoWidget"></video-widget>
</template>
<script lang="ts" setup>
import VideoWidget from '../../components/VideoWidget/index.vue'
import { nextTick, Ref, ref } from 'vue'
import {
    getScreenPlayerElement,
    mediaDeviceOperation,
    recordOperation,
    getCameraPlayerElement,
    videoAndDownloadUrl,
    switchMediaValue
} from './screen'
const video: Ref<HTMLVideoElement | null> = ref(null)
const videoWidget: Ref<null | IVideoWidget> = ref(null)

nextTick(() => {
    getScreenPlayerElement(video as Ref<HTMLVideoElement>)
    getCameraPlayerElement(videoWidget.value!.video)
})
</script>

<style lang="scss" scoped>
@import '../../assets/style/mixin';

.container {
    display: flex;
    padding: 50px 0;
    margin: 0 auto;
    @include WH(90vw, 500px);

    &-video {
        flex: 4;

        .video {
            @include WH(100%, 100%);
        }
    }

    &-operation {
        flex: 2;
    }

    &-download {
        flex: 2;
    }
}
</style>
